<template>
    <a-modal v-model="modal.visible" title="自定义视频名称" @ok="handleOk" class="my-modal" beforeClose="">
        <div class="my-list" v-if="steps.current === 0">
            <a-row
                v-for="(v, k) in titles"
                :key="k"
                type="flex"
                justify="space-between"
                align="middle"
                class="list-item"
                @click.native="handleClick(v.value)"
            >
                <a-col>
                    <p class="title">{{ v.title }}</p>
                    <p class="value">{{ v.value }}</p>
                </a-col>
                <a-col>
                    <a-icon type="right" />
                </a-col>
            </a-row>
        </div>
        <step-2 ref="step2Ref" v-if="steps.current === 1" :current="steps.current" />
        <step-3 ref="step3Ref" v-show="steps.current === 2" />
        <a-steps :current="steps.current" @change="handleStepsChange" size="small" class="steps">
            <a-step title="Step 1" />
            <a-step title="Step 2" />
            <a-step title="Step 3" />
        </a-steps>
        <template slot="footer">
            <a-button key="back" v-show="steps.current > 0" @click="prevStep">
                {{ modal.leftText }}
            </a-button>
            <a-button key="submit" type="primary" v-show="steps.current > 0" @click="nextStep">
                {{ modal.rightText }}
            </a-button>
        </template>
    </a-modal>
</template>
<script>
    import { getVideoInfo } from '../../util/video-details'
    import Step3 from './step3.vue'
    import Step2 from './step2.vue'
    export default {
        components: { Step3, Step2 },
        name: 'EditTitleModal',
        data() {
            return {
                titles: [],
                steps: {
                    current: 0,
                },
                modal: {
                    rightText: '',
                    leftText: '',
                    visible: false,
                },
                newName: '',
                videoList: [],
                curKey: '',
                checkTags: [],
            }
        },
        watch: {
            'steps.current': {
                handler(nval) {
                    if (nval < 3) {
                        this.modal.rightText = '下一步'
                        this.modal.leftText = '上一步'
                    }
                },
                immediate: true,
            },
            'modal.visible': {
                handler(nval) {
                    if (!nval) {
                        this.videoList = []
                        this.titles = []
                        this.steps.current = 0
                    }
                },
            },
        },
        methods: {
            setVisible(val) {
                this.modal.visible = val
            },
            editTitle(title, k) {
                this.modal.visible = true
                this.videoList = this.$store.state.videos.videoList
                const { name, newName } = this.videoList[k]
                if (newName) {
                    this.titles.push({
                        title: '当前文件名：',
                        value: newName,
                    })
                }
                if (name) {
                    this.titles.push({
                        title: '原文件名：',
                        value: name,
                    })
                }
            },
            handleClick(val) {
                this.$store.commit('videos/setCurVideoName', val)
                this.steps.current = this.steps.current + 1
            },
            nextStep() {
                const { current } = this.steps
                if (current === 1) {
                    this.$refs.step3Ref.setTags()
                }
                this.steps.current = current + 1
            },
            prevStep() {
                const { current } = this.steps
                this.steps.current = current - 1
            },
            handleOk() {
                const { videoList, newName, curKey } = this
                const obj = videoList[curKey]
                this.$set(videoList, curKey, {
                    ...obj,
                    newName,
                })
                this.modal.visible = false
            },
            handleStepsChange() {},
        },
    }
</script>
<style lang="less">
    @border: 1px solid #c9c9c9;
    .my-modal {
        .my-list {
            cursor: pointer;
            border-top: @border;
            border-left: @border;
            border-right: @border;
            .list-item {
                padding: 15px 20px;
                border-bottom: @border;
                .title {
                    font-size: 15px;
                }
                .value {
                    margin-bottom: 0;
                    color: #595959;
                }
            }
        }
        .steps {
            margin-top: 20px;
        }
        .ant-modal-body {
            overflow-y: scroll;
            max-height: 500px;
            .ant-tag {
                font-size: 15px !important;
            }
        }
        .new-name {
            margin-top: 20px;
        }
    }
</style>
